{%- assign metadata_styles = 'd-flex flex-items-center mb-3' -%}
<img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
<h1 class="mb-2 lh-condensed">{%- if user.name -%}{{ user.name }}{%- else -%}{{ user.login }}{%- endif -%}</h1>
<p class="mb-3 f4 text-gray">
  {{ user.bio }}
</p>

{%- if include.metadata -%}
  <div class="f4 mb-6">
    {%- if user.name -%}
      <div class="{{ metadata_styles }}">
        {%- octicon mark-github height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:GitHub -%}
        <a href="https://github.com/{{ user.login }}">
          @{{ user.login }}
        </a>
      </div>
    {%- endif -%}
    {%- if user.email -%}
      <div class="{{ metadata_styles }}">
        {%- octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email -%}
        <a href="mailto:{{ user.email }}">
          {{ user.email }}
        </a>
      </div>
    {%- endif -%}
    {%- if user.location -%}
      <div class="{{ metadata_styles }}">
        {%- octicon location height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Location -%}
        {{ user.location }}
      </div>
    {%- endif -%}
    {%- if user.hireable -%}
      <span title="Hire me" class="d-inline-block f5 rounded-2 text-white bg-green py-1 px-2">Available for hire</span>
    {%- endif -%}
  </div>
{%- endif -%}